@import "./base.scss";

.confirm-container{
    min-height: 100%;
    padding: .8rem 0;
    background:$c-fb;
    .header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9;
        background: white;
        .top-bar{
            text-align: center;
            padding:.24rem;
            height: .8rem;
            @include bottom-border-1px($c-ef);
            div{
                width: 2rem;
                font-size: .32rem;
                color: $c-2a;
                &.left,&.right{
                    width: 1rem;
                    font-size: .26rem;
                    text-align: right;
                }
            }
            .left{
                height: .5rem;
                background:url("../images/icon/icon_16.png") no-repeat;
                background-size: .16rem .32rem;
                background-position: left center; 
            }
        }
    }

    // 联系人信息
    .userInfo{
        background: white;
        height: 1.55rem;
        margin-bottom: .1rem;
        padding: 0 .24rem;
        position: relative;
        .icon{
            width: .31rem;
            height: .34rem;
            background: url("../images/icon/icon_20.png") no-repeat;
            background-size: 100% 100%;
        }
        .info{
            flex: 1;
            padding: .3rem .2rem;
            font-size: .26rem;
            color: $c-2a;
            overflow: hidden;
            height: 100%;
            .name{
                width: 4.3rem;
                overflow: hidden;
                span{
                    margin-left: .3rem;
                }
            }
        }
        .add-address{
            position: absolute;
            width: 1.5rem;
            height: .5rem;
            border:1px solid $c-99;
            border-radius: .25rem;
            text-align: center;
            line-height: .5rem;
            font-size: .24rem;
            color: $c-99;
            right: .3rem;
            top: .2rem;
        }
    }
    //配送时间
    .time{
        height: 1.5rem;
        padding: 0 .24rem;
        background: white;
        .text{
            font-size: .3rem;
            font-weight: bold;
            font-family: $f-Bold;
            color: $c-33;
        }
        .date,.hour{
            background: $c-ffba17;
            color: white;
            font-size: .24rem;
            height: .5rem;
            border-radius: .25rem;
            line-height: .5rem;
            padding:0 .24rem;
            .icon{
                display: inline-block;
                vertical-align: middle;
                width: .3rem;
                height: .18rem;
                background: url("../images/icon/icon_21.png") no-repeat;
                background-size: .1rem .18rem;
                background-position: right center;
            }
        }
    }

    .order-list{
        // 订单 card
        padding: .24rem 0;
        margin: .2rem 0;
        background: white;
        .order-card{
            padding: 0 .24rem;
            min-height: 2rem;
            margin-bottom:.2rem;
            padding: 0 .24rem;
            .middle{
                border-radius: $radius-10;
                background: $c-fb;
                padding: .24rem;
                .img{
                    width: 1.62rem;
                    height: 1.62rem;
                    border-radius: $radius-10;
                    overflow: hidden;
                }
                .right{
                    flex:1;
                    height:1.62rem;
                    padding-left: .24rem;
                    .name{
                        font-size: .26rem;
                        color: $c-33;
                    }
                    .size{
                        color: $c-99;
                        font-size: .22rem;
                    }
                    .flex-r-b{
                        color:$c-33;
                        font-size: .28rem;
                    }
                }
            }
        }
        .other{
            padding: .24rem;
            @include top-border-1px($c-ef);
            background: white;
            >div{
                background: $c-fb;
                padding: .24rem;
                border-radius: $radius-10;
                h3{
                    font-size: .3rem;
                    color: $c-33;
                    padding-bottom:.2rem;
                }
                span{
                    display: inline-block;
                    font-size: .26rem;
                    color: $c-33;
                }
            }
        }
    }

    .coupon-list{
        padding:0 0.24rem;
        background: white;
        .item{
            @include bottom-border-1px($c-ef);
            line-height: 1rem;
            color: $c-33;
            font-size: .26rem;
            .btn{
                height: .5rem;
                width: 2.24rem;
                border: 1px solid $c-ffba17;
                line-height: .5rem;
                text-align: center;
                color: $c-ffba17;
                border-radius: .25rem;
            }
            .words{
                flex:1;
                padding: .15rem 0;
                font-size: .26rem;
            }
        }
    }

    .bottom-bar{
        @include top-border-1px($c-ef);
        position: fixed;
        bottom: 0;
        left: 0;
        height: .98rem;
        width: 100%;
        background: white;
        line-height: .98rem;
        .left{
            flex: 1;
            padding: .24rem;
            font-size: .26rem;
            color: $c-33;
            text-align: left;
            .total{
                font-size: .32rem;
            }
        }
        .pay-btn{
            width: 2.88rem;
            height: 100%;
            background: $c-ffba17;
            color: white;
            font-size: .3rem;
            font-weight: bold;
            text-align: center;
        }
    }
}